
import { NavBar, Card, Button } from 'antd-mobile'
import { UserOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import './zhu.css'

function Index() {
  const navigate = useNavigate()

  const handleBack = () => {
    navigate(-1)
    
  }

  const handleConfirm = () => {
    // 处理确认逻辑
    console.log('确认入院证')
    // 可以跳转到下一步页面
    navigate('/deng')
  }

  return (
    <div className="zhu-container">
      {/* 顶部导航栏 */}
      <NavBar
        onBack={handleBack}
       
        className="zhu-navbar"
      >
        入院证确认
      </NavBar>

      {/* 患者信息区域 */}
      <div className="patient-info">
        <div className="patient-basic">
          <span className="patient-name">王小柯</span>
          <span className="patient-id">2015****10</span>
        </div>
        <div className="switch-patient">
          <UserOutline fontSize={16} />
          <span>切换</span>
        </div>
      </div>

      {/* 入院证卡片 */}
      <Card className="admission-card">
        <div className="card-header">
          <div className="card-title">
            <div className="shield-icon">🛡️</div>
            <span>入院证</span>
          </div>
          <span className="status">未登记</span>
        </div>
        
        <div className="patient-details">
          <div className="detail-item">
            <span className="label">姓名：</span>
            <span className="value">王小柯</span>
          </div>
          <div className="detail-item">
            <span className="label">性别年龄：</span>
            <span className="value">女 25岁</span>
          </div>
          <div className="detail-item">
            <span className="label">入院科室：</span>
            <span className="value">门诊内一科</span>
          </div>
          <div className="detail-item">
            <span className="label">开证医生：</span>
            <span className="value">刘医生</span>
          </div>
          <div className="detail-item">
            <span className="label">开证时间：</span>
            <span className="value">2020-01-01 15:20:20</span>
          </div>
          <div className="detail-item">
            <span className="label">入院诊断：</span>
            <span className="value">肺部阴影</span>
          </div>
        </div>
      </Card>

      {/* 门诊患者入院程序提示 */}
      <Card className="procedure-card">
        <div className="procedure-title">门诊患者入院程序提示</div>
        
        <div className="procedure-steps">
          <div className="step-item">
            <div className="step-number">(1)</div>
            <div className="step-content">
              门诊医生评估患者病情，确认需要住院治疗，如医院服务满足需求，开具入院申请单及核酸检测单。
            </div>
          </div>
          
          <div className="step-item">
            <div className="step-number">(2)</div>
            <div className="step-content">
              入院患者持入院申请单，进行核酸检测（普通患者），核酸检测阴性报告后，前往入院处及病区（病区）。行动不便或病情危重患者，相关科室通知值班中心协助患者/家属完成入院手续。
            </div>
          </div>
          
          <div className="step-item">
            <div className="step-number">(3)</div>
            <div className="step-content">
              病区护士接到入院申请单后，热情接待患者，查验患者及家属核酸检测报告，确认无异常后，安排床位，进行病情评估及病区宣教。
            </div>
          </div>
          
          <div className="step-item">
            <div className="step-number">(4)</div>
            <div className="step-content">
              通知主管医生查看患者，及时执行医嘱。
            </div>
          </div>
        </div>
      </Card>

      {/* 底部确认按钮 */}
      <div className="confirm-button-container">
        <Button 
          className="confirm-button" 
          block 
          color="primary"
          onClick={handleConfirm}
        >
          我已确认, 并进入下一步
        </Button>
      </div>
    </div>
  )
}

export default Index
